<template>
    <!--顶部导航栏-->
    <div class="top-navigate-bar">

      <!--顶部菜单-->
      <header class="top-navigate-bar-header">
        <h2>{{headerTitle}}</h2>
      </header>

      <div class="top-navigate-bar-top">
        <el-menu :default-active="activeIndex"  class="el-menu-demo" style="border-bottom: 0;" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">处理中心1</el-menu-item>
          <el-menu-item index="2">处理中心2</el-menu-item>
          <el-menu-item index="3">处理中心3</el-menu-item>
          <el-menu-item index="4">处理中心4</el-menu-item>
          <el-menu-item index="5">处理中心5</el-menu-item>
          <el-menu-item index="6">处理中心6</el-menu-item>
        </el-menu>

        <div class="top-bar-infos">
          <i class="el-icon-user-solid top-bar-login-user"></i>
        </div>
        <div class="top-bar-infos">
          <el-button size="mini" type="primary" plain class="exit">退出</el-button>
        </div>

      </div>


    </div>

</template>

<script>
    export default {
      name: "TopNavbar",
      data(){
        return {
          activeIndex:"",
          headerTitle:"监督系统"
        }
      },
      mounted(){
        this.handleSelect(1);
      },
      methods:{
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        }
      }

    }
</script>

<style lang="scss" scoped>
  .top-navigate-bar {
    height: 60px;
    /*position: relative;*/
    /*顶部导航条*/
    display: flex;
    /*margin-bottom: 10px;*/
    background-color: #409EFF;
    justify-content: space-between;
    // 上面的header
    .top-navigate-bar-header {
      padding-left: 50px;
      h2 {
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        padding: 0;
        margin: 0;
      }
    }
    // 导航条
    .top-navigate-bar-top{
      display: flex;
      .el-menu-demo {
        background-color: #409EFF;
        margin-right: 120px;
        .el-menu-item {
          font-size: 13px;
          color: white;
          font-weight: bold;
        }
        .el-menu-item:hover,
        .el-menu-item:focus,
        .el-menu-item:after{
          background-color: #ccc;
        }
        .el-menu-item.is-active{
          background-color: #ccc !important;;
        }
      }
      .top-bar-infos {
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 100%;
        .top-bar-login-user {
          display: block;
          width: 40px;
          height: 40px;
          line-height: 40px;
          border-radius: 50%;
          background-color: lightblue;
          margin-right: 20px;
          text-align: center;
          font-size: 20px;
          font-weight: bold;
          color: #ecf5ff;

        }
        .top-bar-login-user:hover {
          cursor: pointer;
        }
        .exit {
          margin-right: 50px;
        }
      }
    }
  }
</style>
